<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	th:href="@{/bootstrap/css/bootstrap.min.css}" />
<script type="text/javascript"
	th:src="@{/bootstrap/js/bootstrap.min.js}"></script>


</head>
<style>
</style>
<body>
	<!-- 全部订单 -->
	<div id="uc-order-all-content" class="uc-content-content"
		th:fragment="frg0" xmlns:th="http://www.w3.org/1999/xhtml">
		<table class="table table-bordered table-hover">
			<colgroup>
				<col width="25%" />
				<col width="15%" />
				<col width="30%" />
				<col width="10%" />
				<col width="20%" />
			</colgroup>
			<thead>
				<tr>
					<th>项目信息</th>
					<th>订单日期</th>
					<th>筹资进度</th>
					<th>支付金额</th>
					<th>项目状态</th>

				</tr>
			</thead>
			<tbody>

				<tr th:each="order : ${orders}" th:id="${order.orderId}">
					<th>
						<div>
							<a class="btn btn-link" th:text="${order.projectName}"
								th:href="'/detail/showDetail?projID='+${order.projectId}"></a>
						</div>
					</th>
					<th>
						<div>
							<p th:text="${order.date}"></p>
						</div>
					</th>
					<th>
						<div>
							<p>
								目标金额:<span th:text="${order.targetMoney}+'￥'"></span>
							</p>
							<div th:with="percent=${order.currentMoney}/${order.targetMoney}">
								<progress th:value="${order.currentMoney}"
									th:max="${order.targetMoney}"></progress>
								<span
									th:text="${#numbers.formatDecimal(percent * 100, 1, 1)}+'%'">
								</span>
							</div>
						</div>
					</th>
					<th>
						<div>
							<span th:text="${order.money}"> </span> <span>￥</span>
						</div>
					</th>

					<th> 
						<p class = "btn btn-info " th:text="${order.stateName}" ></p>
					</th>
				</tr>
			</tbody>
		</table>
	</div>

	<!-- 未支付订单 -->

	<div id="uc-order-unpaid-content" class="uc-content-content"
		th:fragment="frg1" xmlns:th="http://www.w3.org/1999/xhtml">

		<table class="table table-bordered table-hover">
			<colgroup>
				<col width="25%" />
				<col width="15%" />
				<col width="20%" />
				<col width="10%" />
				<col width="10%" />
				<col width="20%" />
			</colgroup>
			<thead>
				<tr>
					<th>项目信息</th>
					<th>订单日期</th>
					<th>筹资进度</th>
					<th>待付金额</th>
					<th>项目状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

				<tr th:each="order : ${orders}" th:if="${order.state == 0 }"
					th:id="${order.orderId}">
					<th>
						<div>
							<a class="btn btn-link" th:text="${order.projectName}"
								th:href="'/pro/fore/projectDetails?id='+${order.projectId}"></a>
						</div>
					</th>
					<th>
						<div>
							<p th:text="${order.date}"></p>
						</div>
					</th>
					<th>
						<div>
							<p>
								目标金额:<span th:text="${order.currentMoney}+'￥'"></span>
							</p>
							<div th:with="percent=${order.currentMoney}/${order.targetMoney}">
								<progress th:value="${order.currentMoney}"
									th:max="${order.targetMoney}"></progress>
								<span
									th:text="${#numbers.formatDecimal(percent * 100, 1, 1)}+'%'">
								</span>
							</div>
						</div>
					</th>
					<th>
						<div>
							<span th:text="${order.money}"> </span> <span>元</span>
						</div>
					</th>
					<th>
						<p class = "btn btn-info " th:text="${order.stateName}" ></p>
					</th>



					<th id="uc-order-gopay">
						<!-- 选择支付方式弹窗 -->
						<a class = "btn btn-success"  id="uc-order-btn" onclick="uc_openDialogGopay()" type = "">去支付</a>

						<div id="uc-dialog-gopay" class="uc-dialog">
							<div class="uc-dialog-header">
								<h3>选择支付方式</h3>
							</div>
							<div class="uc-dialog-backicon">
								<a onclick="uc_closeDialogGopay()"><img src="/img/close.png"
									width="25px" height="25px" /></a>
							</div>
							<div class="uc-dialog-item">
								<div class="uc-dialog-item-header">订单金额:</div>
								<div class="uc-dialog-item-content" th:text="${order.money}">#订单金额</div>
							</div>

							<form action="/pay/alipay" method="post">
								<div class="uc-dialog-item">
									<div>支付方式：</div>
									<div class="uc-dialog-item-content">
										<label><input type="radio" class="check"
											name="uc_payChoice" checked="checked" th:value="1" />支付宝</label> <label><input
											type="radio" class="check" name="uc_payChoice" th:value="2" />微信</label>
										<label><input type="radio" class="check"
											name="uc_payChoice" th:value="3" />余额</label>
									</div>
								</div>
								<div class="uc-dialog-submit">
									<input name="idInteger" type="hidden"
										th:value="${order.orderId}" /> <input name="projectId"
										type="hidden" th:value="${order.projectId}" /> <input
										name="userId" type="hidden" th:value="${order.userId}" /> <input
										name="money" type="hidden" th:value="${order.money}" /> <button
										 onclick="uc_closeDialogGopay()">支付</button>
								</div>
							</form>
						</div> 
						 <a class = "btn btn-danger" id="deleteOrderBtn"
							th:onclick="'deleteOrder('+${order.orderId}+')'">删除</a>  
					</th>

				</tr>
			</tbody>
		</table>
	</div>

	<!-- 已支付订单 -->
	<div id="uc-order-paid-content" class="uc-content-content"
		th:fragment="frg2" xmlns:th="http://www.w3.org/1999/xhtml">

		<table class="table table-bordered table-hover">
			<colgroup>
				<col width="25%" />
				<col width="15%" />
				<col width="20%" />
				<col width="10%" />
				<col width="15%" />
				<col width="15%" />
			</colgroup>
			<thead>
				<tr>
					<th>项目信息</th>
					<th>订单日期</th>
					<th>筹资进度</th>
					<th>已付金额</th>
					<th>项目状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

				<tr th:each="order : ${orders}" th:if="${order.state == 1}">
					<th>
						<div>
							<a class="btn btn-link" th:text="${order.projectName}"
								th:href="'/pro/fore/projecthetails?id='+${order.projectId}"></a>
						</div>
					</th>
					<th>
						<div>
							<p th:text="${order.date}"></p>
						</div>
					</th>
					<th>
						<div>
							<p>
								目标金额:<span th:text="${order.currentMoney}+'￥'"></span>
							</p>
							<div th:with="percent=${order.currentMoney}/${order.targetMoney}">
								<progress th:value="${order.currentMoney}"
									th:max="${order.targetMoney}"></progress>
								<span
									th:text="${#numbers.formatDecimal(percent * 100, 1, 1)}+'%'">
								</span>
							</div>
						</div>
					</th>
					<th>
						<div>
							<span th:text="${order.money}"> </span> <span>元</span>
						</div>
					</th>
					<th>
						<div>
							<div>
								<p class = "btn btn-info " th:text="${order.stateName}" ></p>
							</div>
						</div>
					</th>
					<th>
						<div>
							<a class = "btn btn-success"  th:href="''" th:if="${order.proState} == 5">确认回报</a>
							<button class = "btn btn-danger"  th:if="${order.proState} == 6"
								th:onclick="'deleteOrder('+'this,'+${order.orderId}+')'">删除</button>
							<button class = "btn btn-danger"  th:href="''">投诉</button>
						</div>
					</th>
				</tr>
			</tbody>
		</table>
	</div>

</body>
</html>